<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>组件的基本使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <Hello></Hello>
        <School></School>
        <Student></Student>
    </div>

    <script>
        // Hello 组件
        const Hello = Vue.extend({
            template: `
                <div>
                    <h2>你好啊！{{ name }}</h2>
                </div>
            `,
            data() {
                return {
                    name: '张三'
                }
            }
        })
        Vue.component('Hello', Hello)

        // School 组件
        const School = {
            template: `
                <div class="demo">
                    <h2>学校名称：{{ name }}</h2>
                    <h2>学校地址：{{ address }}</h2>
                    <button @click="showName">点我提示学校名</button>
                </div>
            `,
            data() {
                return {
                    name: '尚硅谷',
                    address: '北京昌平'
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName)
                }
            }
        }

        // Student 组件
        Vue.component('Student', {
            template: `
                <div>
                    <h2>学生姓名：{{ name }}</h2>
                    <h2>学生年龄：{{ age }}</h2>
                </div>
            `,
            data() {
                return {
                    name: '张三',
                    age: 18
                }
            }
        })


        new Vue({
            el: '#app',
            components: { School }
        })
    </script>
</body>
</html>